<template>
	<view class="alert" style="background-color: blue;">
		<u-popup :round="10" :safeAreaInsetBottom="false" :show="show" mode="center" @close="close">
			<view style="border-radius: 20rpx; ">
				<!-- <image class="assistant-icon" src="../static/images/observe/assistant-icon.png"></image> -->
				<image class="assistant-icon" src="../../static/images/observe/assistant-icon.png"></image>
				<view class="title f32 bold inline">我有邀请函</view>
				<view class="content">
					<u-input custom-style="background-color: #F7F9FA; border: none;font-size: 28rpx; color: #99A1AF;"
						placeholder="请输入邀请码（10位英文与数字的组合）" placeholder-style="font-size: 28rpx;color: #99A1AF;"
						v-model="inviteCode"></u-input>

				</view>
				<view style="height: 45px; margin: 10px 15px; display: flex; justify-content: space-between;">
					<view class="inline assistant-btn f32">
						<u-button text="取消"
							custom-style="border-radius: 44rpx; background-color: #F2F3F7; color: #3A3D4B; border: none;"
							@click="close"></u-button>
					</view>
					<view class="inline assistant-btn" style="margin-left: 32rpx;">
						<u-button text="确定" custom-style="border-radius: 44rpx; background-color: #58C866; color: #FFF;"
							@click="confirm"></u-button>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: "rf-invitepopup",
		props: {
			show: {
				type: Boolean,
				required: true,
				default: false,
			},
			title: {
				type: String,
				required: false,
				default: ""
			},
			desc: {
				type: String,
				required: false,
				default: ""
			},
			cancelText: {
				type: String,
				required: false,
				default: "取消"
			},
			confirmText: {
				type: String,
				required: false,
				default: "确定"
			}
		},
		data() {
			return {
				inviteCode: "",
			}
		},
		watch: {
			inviteCode(val) {
				console.log(val);
				this.$emit("input", val)
			}

		},
		methods: {
			confirm() {
				this.$emit('confirm')
				this.inviteCode = "";
			},
			close() {
				this.$emit('close')
				this.inviteCode = "";
			}
		}
	}
</script>


<style lang="scss">
	.alert {


		.assistant-icon {
			width: 226rpx;
			height: 322rpx;
			position: absolute;
			right: -12rpx;
			top: -210rpx;
		}

		.title {
			line-height: 22rpx;
			border-bottom: 12rpx solid rgba(88, 200, 102, .55);
			box-sizing: border-box;
			margin-top: 40rpx;
			margin-left: 28rpx;
		}

		.data-v-c4a74aee {
			font-size: 28rpx !important;
			color: #3A3D4B;
		}

		.u-checkbox__icon-wrap--circle.data-v-c4a74aee {
			width: 32rpx !important;
			height: 32rpx !important;
		}

		.content {
			margin-top: 20rpx;
			padding: 30rpx 28rpx;
		}

		.assistant-btn {
			width: 244rpx;
			height: 72rpx;
		}
	}

	.popup {
		.u-popup__content.data-v-3a231fda {
			position: relative;
			border-radius: 24rpx 24rpx 0 0;
			overflow: hidden;
			padding-bottom: 150rpx;
		}

		.u-picker__view.data-v-f45a262e {
			height: 360rpx !important;
		}


		.u-toolbar__wrapper__cancel.data-v-55c89db1 {
			padding: 0;
			position: absolute;
			left: 100rpx;
			bottom: -78rpx;
		}

		.u-toolbar__wrapper__confirm.data-v-55c89db1 {
			padding: 0;
			position: absolute;
			right: 100rpx;
			bottom: -78rpx;
		}
	}
</style>